<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
    <h1>The Ajax 01 Page</h1>
    <button onclick="doAjaxStart()">Ajax Get Request</button>
    <span id="result"></span>
    </div>
    <script>
        function  doAjaxStart(){
            //初始化span标记内部内容
            let span = document.getElementById("result");
            span.innerHTML="Data is loading..."
            //创建xhr对象
            let xhr = new XMLHttpRequest();
            //设置状态监听
            xhr.onreadystatechange=function (){
                //readyState==4表示服务端响应到客户端的数据已经接受完成
                //status==200表示服务端处理过程是ok的，500表示异常
                if(xhr.readyState==4&&xhr.status==200){
                    span.innerHTML=xhr.responseText;
                }
            }
            //建立连接
            const url="http://localhost/doAjaxStart";
            xhr.open("GET",url,true);
            //发送ajax请求
            xhr.send(null);
            console.log("==main==");
        }
    </script>
</body>
</html>